<template>
    <div>
        <h1>购物车</h1>
        <ul>
            <li v-for="(v,i) of data" :key="i">
                {{v.name}} 
                {{v.price}} 
                <Counter :num='v.qu' :i='i' @jia='jia' @jian='jian'/>
            </li>
        </ul>
        <h1>总价:{{zong}}</h1>
        <Control @sun='sun'/>
    </div>
</template>
<script>
import Counter from './Counter.vue'
import Control from './Control.vue'
export default {
    components:{Counter,Control},
    data(){
        return {
            data:[
                {name:'苹果',price:5.5,qu:0},
                {name:'香蕉',price:6.5,qu:0},
                {name:'鸭梨',price:7.5,qu:0},
            ],
            zong:0
        }
    },
    methods:{
        jian(i){
            if(this.data[i].qu>0){
                this.data[i].qu--
                this.zong=this.zong-this.data[i].price
            }
        },
        jia(i){
            this.data[i].qu++
            this.zong=this.zong+this.data[i].price
        },
        sun(){
            for(let i=0;i<this.data.length;i++){
                this.data[i].qu=0
            }
            this.zong=0
        }
    }
}
</script>